<script setup lang="ts" name="SlotMachine2">
import img01 from '@/assets/lottery/slotMachine/slotMachine2/0.png'
import img02 from '@/assets/lottery/slotMachine/slotMachine2/1.png'
import img03 from '@/assets/lottery/slotMachine/slotMachine2/2.png'
import { lottery } from '@/api/lottery'
const SlotMachineRef = ref(null)

const initInfo = ref({
  blocks: [
    { padding: '0px' }
  ],
  prizes: [
    { borderRadius: '8px', imgs: [{ src: img01, top: '20%', width: '80%' }] },
    { borderRadius: '8px', imgs: [{ src: img02, top: '10%', height: '80%' }] },
    { borderRadius: '8px', imgs: [{ src: img03, top: '20%', width: '80%' }] }
  ],
  slots: [
    { direction: 1 },
    { direction: -1 },
    { direction: 1 }
  ],
  defaultConfig: {
    rowSpacing: '4px',
    colSpacing: '0.9vw'
  },
  defaultStyle: {
    background: '#fff'
  }
})

// 点击抽奖按钮会触发star回调
const startCallback = () => {
  // 调用抽奖组件的play方法开始游戏
  SlotMachineRef.value.play()
  // 模拟调用接口异步抽奖
  lottery.result({ count: initInfo.value.prizes.length - 1, column: initInfo.value.slots.length }, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    if (res && res.code === 200) {
      // 调用stop停止旋转并传递中奖索引
      SlotMachineRef.value.stop(res.data.index)
    }
  })
}

// 抽奖结束会触发end回调
const endCallback = (prize) => {
  console.log(prize, '抽奖结果回调')
}
</script>

<template>
  <el-card shadow="hover">
    <template #header>
      <div class="card-header">
        <span>老虎机-普通</span>
      </div>
    </template>
    <div class="slot-machine-pane">
      <div class="slot-machine-content">
        <SlotMachine ref="SlotMachineRef" width="16.3564vw" height="6.927vw" :defaultConfig="initInfo.defaultConfig" :defaultStyle="initInfo.defaultStyle" :prizes="initInfo.prizes" :slots="initInfo.slots" @end="endCallback"></SlotMachine>
      </div>
      <div class="slot-machine-start" @click="startCallback">开始抽奖</div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  :deep(.el-card__body) {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #01bb78;
    background-image: url('@/assets/lottery/bg.svg');
    background-attachment: fixed;
  }
}

.slot-machine-pane {
  position: relative;
  width: 25vw;
  height: 15.8854vw;
  margin: 1.671vw auto 1.669vw;
  overflow: hidden;

  &::before{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url('@/assets/lottery/slotMachine/slotMachine2/bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: '';
  }

  .slot-machine-content{
    position: absolute;
    top: 2.2396vw;
    left: 3.3856vw;
    z-index: 0;
    width: 17.7564vw;
    height: 6.927vw;
    padding: 0 0.7vw;
    overflow: hidden;
    background-image: url('@/assets/lottery/slotMachine/slotMachine2/area.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 4px;

    &::before, &::after{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      content: '';
    }

    &::before{
      box-shadow: 0 0 10px 5px rgba(0,0,0,0.6) inset;
    }

    // &::after{
    //   box-shadow: 0 -10px 10px -10px rgba(0,0,0,0.5) inset;
    // }
  }

  .slot-machine-start{
    position: absolute;
    bottom: 2.6042vw;
    left: 7.5vw;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9.8958vw;
    height: 2.2917vw;
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    background-image: url('@/assets/lottery/slotMachine/slotMachine2/btn.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
}
</style>
